<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-left" color="#fff" size="34"></u-icon> -->
			</view>
			<view class="r-name">意见反馈</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="content p-32">
			<view class="desc common">
				<view class="d-title">请选择您要反馈的问题类型</view>
				<view class="yj dispaly-center">
					<view :class="{ ac: item.isS }" class="yj-item dispaly-align-center" @click="item.isS = !item.isS" v-for="(item, index) in problemList" :key="index">
						{{ item.name }}
					</view>
				</view>
				<view class="text-a">
					<textarea class="area" cols="30" rows="10" placeholder="详细描述问题或建议"></textarea>
					<view class="up">
						<ImageUpload :number="3" />
					</view>
				</view>
			</view>
			<view class="common tel">
				<input type="number" maxlength="11" placeholder="请输入联系方式" />
			</view>
			<view class="bottom-btn-box dispaly-align-center">
				<view class="bottom-btn dispaly-align-center">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util';
import ImageUpload from '@/compoment/imageUpload/imageUpload.vue';

const problemList = ref([
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '功能建议', type: 1, isS: false },
	{ name: '其他', type: 1, isS: false }
]);

// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.ac {
	background-color: #565667 !important;
	color: #fff !important;
}

.common {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 32rpx;
}

.r-name {
	color: #020121;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.content {
	.desc {
		margin-bottom: 16rpx;
		.d-title {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 28rpx;
			color: #020121;
		}
		.yj {
			margin: 20rpx 0;
			flex-wrap: wrap;
			.yj-item {
				background: #e2e2ed;
				border-radius: 20rpx;
				padding: 8rpx 16rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #020121;
				margin: 8rpx;
			}
		}
		.text-a {
			background: #f4f6f8;
			border-radius: 20rpx;
			position: relative;
			.up {
				position: absolute;
				left: 24rpx;
				bottom: 24rpx;
				z-index: 9999;
			}
			.area {
				height: 360rpx;
				background: #f4f6f8;
				border-radius: 20rpx;
				padding: 24rpx;
			}
		}
	}
}
.bottom-btn-box {
	margin-top: 176rpx;
	.bottom-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(138deg, #7b7b89 0%, #020121 100%);
		border-radius: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>
